<!--
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2022-11-25 20:52:25
 * @LastEditors: sueRimn
 * @LastEditTime: 2025-08-06 22:13:20
-->
<template>
    <view class="login">
        <!-- 自定义导航栏 -->
        <custom-navbar title="用户登录" />

        <image src="@/static/images/my/avatar_default.png" class="logo" />

        <view class="item d-flex align-items-center">
            <view class="base-icons shouji-icon"></view>
            <view class="input">
                <input type="number" v-model="phone" maxlength="11" placeholder="请输入手机号" />
            </view>
        </view>

        <view class="item code d-flex align-items-center">
            <view class="base-icons yanzhengma-icon"></view>
            <view class="input flex-fill">
                <input type="number" v-model="code" maxlength="4" placeholder="请输入验证码" />
            </view>
            <view :class="show ? 'item-btn' : 'item-btn disable'" v-bind:disabled="show" @click="handleSendSms">
                <text v-if="show">发送验证码</text>
                <text v-else>{{ count }}s</text>
            </view>
        </view>

        <view class="agreement d-flex align-items-center" @click="handleAgree">
            <view class="icon">
                <view class="base-icons gouxuan-icon" v-if="agree"></view>
                <view class="base-icons weixuan-icon" v-else></view>
            </view>
            <view class="t1" @click="$emit('handleAgree')">请认真阅读并勾选</view>
            <view class="t2" @click="uniRouter.navigateTo('/pages/article/info?id=100010')">《隐私协议》</view>
            <view class="t1">和</view>
            <view class="t2" @click="uniRouter.navigateTo('/pages/article/info?id=100009')">《用户协议》</view>
        </view>
        <view class="btn" @click="login">登录</view>
        
        <view class="switch-login" @click="handlePasswordLogin">
            <text>使用密码登录</text>
        </view>
    </view>
</template>
<script>
import { fetchPhoneSmsLogin, fetchSendSms } from '@/api';
import WeValidator from 'we-validator'

export default {
    name: "Login",
    data() {
        return {
            to_from: "",
            phone: "",
            code: "",
            agree: null,
            show: true,
            timer: null, //设置计时器,
            count: 0,
            validatorInstance: null
        }
    },
    methods: {
        //获取验证码
        handleSendSms() {
            const payload = {
                phone: this.phone
            }
            if (!this.validatorInstance.checkFields(payload, ['phone'])) return;
            let TIME_COUNT = 60;
            if (!this.timer) {
                this.count = TIME_COUNT;
                this.show = false;
                this.timer = setInterval(() => {
                    if (this.count > 0 && this.count <= TIME_COUNT) {
                        this.count--;
                    } else {
                        this.show = true;
                        clearInterval(this.timer);
                        this.timer = null;
                    }
                }, 1000);
            }
            fetchSendSms(payload).then(res => {
                if (res.code === 200) {
                    // 显示成功提示
                    uni.showToast({
                        title: '验证码已发送',
                        icon: 'success'
                    });

                    // 开始倒计时
                    // this.startCountdown();
                } else {
                    // 显示错误信息
                    uni.showToast({
                        title: res.msg || '发送验证码失败',
                        icon: 'none'
                    });
                }
            })
        },
        //点击同意登录协议
        handleAgree() {
            this.agree = this.agree ? null : true
        },

        //登录
        async login() {
            if (!this.agree) {
                uni.showToast({
                    title: '请同意用户协议',
                    icon: 'none'
                })
                return;
            }
            const payload = {
                phone: this.phone,
                code: this.code,
            }
            if (!this.validatorInstance.checkData(payload)) return;
            uni.showLoading({
                title: '登录中...',
                mask: true
            })
            const result = await fetchPhoneSmsLogin(payload);
            uni.hideLoading()
            if (result.code == 200) {
                this.$store.dispatch('user/userLogin', result.data)
                this.checkGo();
            } else {
                uni.showToast({
                    title: result.message,
                    icon: 'none'
                })
            }
        },
        initValidator() {
            // 实例化
            this.validatorInstance = new WeValidator({
                rules: {
                    phone: {
                        required: true,
                        mobile: true
                    },
                    code: {
                        required: true,
                        minlength: 4
                    }
                },
                messages: {
                    phone: {
                        required: '手机号码不能为空',
                        mobile: '请输入正确的手机号码'
                    },
                    code: {
                        required: '验证码不能为空',
                        minlength: '验证码长度不正确'
                    }
                }
            });
        },
        checkGo() {
            const pages = getCurrentPages()
            if (this.to_from) {
                uni.redirectTo({ url: this.to_from })
            } else {
                if (pages.length > 1) {
                    uni.navigateBack()
                } else {
                    uni.switchTab({ url: `/pages/user/index` })
                }
            }
        },
        handlePasswordLogin() {
            uni.navigateTo({
                url: '/pages/login/passwordLogin'
            })
        },
    },
    mounted() {
        this.initValidator()
        this.to_from = this.$route.query.to_from
    },

}
</script>
<style lang="scss">
.login {
    height: 100vh;
    padding: 0 64rpx;
    overflow: hidden;
    background-color: #fff;


    .logo {
        display: block;
        width: 192rpx;
        height: 194rpx;
        margin: 160rpx auto 56rpx;
    }

    .btn {
        margin: 32rpx auto 0;
        height: 96rpx;
        line-height: 96rpx;
        border-radius: 50rpx;
        font-size: var(--hui-font-size-32);
        display: block;
        background-color: var(--hui-color-primary);
        text-align: center;
        color: #fff;
    }

    .agreement {
        font-size: var(--hui-font-size-26);
        color: #A8A8A8;
        margin: 120rpx 0 0 0;

        .base-icons {
            margin-right: 10rpx;
        }

        .t1 {
            color: #A8A8A8;
            padding: 0 5rpx;
        }

        .t2 {
            color: var(--hui-color-primary);
            font-weight: 500;
            border: 0;
            padding: 0;
            margin: 0;
            background: transparent;
        }
    }

    .item {
        margin: 24rpx 0 0 0;
        border-radius: 50rpx;
        background-color: #f7f7f7;
        height: 96rpx;

        .base-icons {
            margin: 0 12rpx 0 32rpx;
        }

        .input {
            outline: none;
            font-size: 32rpx;
            color: #333;
        }

        .disable {
            width: 280rpx;
            text-align: right;
            color: #999;

        }
    }

    .code {
        .input {
            width: 300rpx;
        }

        .item-btn {
            width: 250rpx;
            color: var(--hui-color-primary);
            text-align: right;
            border-left: solid #e8e8e8 2rpx;
            text-align: center;
        }

        .disable {
            pointer-events: none;
            color: #CCCCCC;
        }
    }

    .switch-login {
        margin-top: 32rpx;
        text-align: center;
        font-size: var(--hui-font-size-28);
        color: var(--hui-color-primary);
    }

}
</style>